//生成一个表单，里面包含的字段有影片名称，影片描述，影片图片，影片地址，演员列表，影片作者
<template>
  <div class="movie">
    <el-form label-width="80px">
      <el-form-item label="影片名称">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="影片描述">
        <el-input v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="演员列表">
        <el-input v-model="form.actors"></el-input>
      </el-form-item>

      <el-form-item label="剧照">
        <el-input v-model="form.picPaths"></el-input>
      </el-form-item>


      <el-form-item label="播放地址">
        <el-input v-model="form.playUrl"></el-input>
      </el-form-item>

      <el-form-item>
            <el-button type="primary" @click="addMovie">提交</el-button>
        </el-form-item>
    </el-form>
  </div>


  <div class="courses zCourses">
    <div class="course hover_boxShadow_defaut_shadow" v-for="item in movies">
    
        <router-link :to="{name:'MovieDetail',query:{id:item.id} }">  
            
        <div class="iconPathBox">
        <img  :src="item.picPaths" lazy="loaded"></div>
        <div :title="item.title" class="name"> {{item.title}} </div>
        <div :title="item.title" class="desc"> 影片介绍：{{item.desc}}</div>
        <div :title="item.price" class="desc"> 演员列表：{{item.actors}}</div>

        </router-link> 

      </div>


      </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import { add ,getList} from '../utils/request'
import { TableName } from '../utils/request'
import { onMounted } from 'vue'
import { useUserStore } from '../stores/user'
const userStore = useUserStore()

const form = ref({
  title: '',
  desc: '',
  actors: '',
  picPaths: '',
  playUrl: '',
  typeIndex:TableName.Movies
})

const movies = ref([])
onMounted(async () => {
  const res = await getList(TableName.Movies)
  console.log(res)
  movies.value = res
})
async function addMovie() {
  // 添加当前登录用户的 userid
  const submitData = {
    ...form.value,
    userid: userStore.user?.id || null
  }
  const res = await add(submitData)
  console.log(res)
  
  // 如果提交成功，重新获取电影列表并清空表单
  if (res) {
    const newMovies = await getList(TableName.Movies)
    movies.value = newMovies
    // 清空表单
    form.value = {
      title: '',
      desc: '',
      actors: '',
      picPaths: '',
      playUrl: '',
      typeIndex:TableName.Movies
    }
  }
}




</script>

<style scoped>

.courses {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
}

.courses .course {
    cursor: pointer;
    padding: 4px 10px 0;
    margin-bottom: 15px;
    width: 250px;
    height: 240px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #fff;
}

 .iconPathBox img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 220px;
    height: 135px;
    border-radius: 8px;
}

.hover_boxShadow_defaut_shadow {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16);
    transition: box-shadow .2s linear;
}

.course .name,.course .desc {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>